<template>
    <el-card shadow="hover">
        <div ref="chartRef" :style="{height:props.height, width:props.width}" ></div>
    </el-card>
    
</template>

<script setup lang="ts">
import { useEcharts } from '@/hooks/useEcharts'
import { reactive, computed } from 'vue'

interface Series {
    typeName: string;
    list: number[]
}

const props = withDefaults(defineProps<{
    width?: string,
    height?: string,
    theme?: string,
    bgColor?: string,
    title: string,
    subtitle?: string,
    data: any[], // 曲线数据
    xAxisData: string[] // X 轴数据
}>(), {
    width: '100%',
    height: '380px',
    data: () => []
})

// 右上角标签名
const legendData = computed(() => props.data.map(item => item.typeName))
// 拆线数据
const series = computed(() => props.data.map(item => ({
    name: item.typeName,
    type: 'line',
    smooth: 0.5,
    emphasis: {
        focus: 'series'
    },
    data: item.list
})))

// 近30天销售趋势
const option = reactive({
    backgroundColor: props.bgColor,
    title: {
        text: props.title,
        subtext: props.subtitle,
        x: 'left'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    legend: {
        right: '50px',
        data: legendData
    },
    toolbox: {
        feature: {
            // 下载图片
            saveAsImage: {
                title: '下载为图片'
            }
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            // 上面使用了reactive声明了option，则需要 computed 才能加载最新数据
            data: computed(() => props.xAxisData)
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: series
})

const { chartRef } = useEcharts({props, option})
</script>

<style scoped>

</style>